<template>
  <div class="box hide-scroller-bar">
    <div
      class="item"
      v-for="(item, index) in current"
      :key="item.alias"
      @click="itemClick(item.alias)"
      :class="currentAlias==(item.alias)?'active-item':''"
    >
      <!-- 主图 -->
      <div v-if="item.alias == 'MainDrawing'">
        <div class="banner">
          <div class="tag-tip">{{ item.name }}</div>
          <div v-for="(item, index) in current" :key="index">
            <img
              style="width: 100%; height: 500px; object-fit: cover"
              v-if="item.alias == 'MainDrawing' && item.imgList.length"
              :src="item.imgList[0].url"
              alt=""
            />
          </div>
        </div>
        <div class="content-box">
          <a-col class="link">
            <img src="./images/logo.jpg" class="logo-icon">
            <span
              style="margin: 0 15px"
              v-for="(item, index) in linkList"
              :key="index"
              >{{ item.title }}</span
            >
          </a-col>
          <a-row class="content-title">
            <a-col>
              <img
                class="find-room"
                :src="$utils.staticPath + `images/village/findRoom.jpg`"
                alt=""
              />
            </a-col>
          </a-row>
        </div>
      </div>

      <!-- 推广区1 -->
      <div
        class="relative"
        style="width: 100%; background: #ffff"
        v-else-if="item.alias == 'PromotionArea1'"
      >
      <div  class="tag-hidden" v-if="!item.switch">模块已隐藏</div>
      <div class="tag-tip">{{ item.name }}</div>
        <div class="content-title1">
          <a-row>
            <div class="content">
              <a-col
                class="icon-list"
                v-for="(image, imageIndex) in item.itemList"
                :key="imageIndex"
              >
                <div class="icon" v-if="image.imgList.length">
               
                  <img class="img" :src="image.imgList[0].url" alt="" />
                </div>
                <div style="width: 60px">{{ image.title }}</div>
              </a-col>
            </div>
          </a-row>
        </div>
      </div>
      <!-- 资讯信息 -->
      <div  v-else-if="item.alias == 'Information'" class="Information">
        <div class="tag-tip">{{ item.name }}</div>
        <div class="tab-wrapper">
            <div class="tab-left-wrapper">
              <div class="info-title">{{ item.title }}</div>
              <div class="tab-list">
                <div v-for="(tab,tIndex) in item.tabList" class="item-tab" >
                    <div :class="currentTab==tIndex?'active-tab':''" class="item-tab-title">{{ tab.cat_name }}</div>
                    <div class="tab-line" v-if="tIndex+1!=item.tabList.length"></div>
                </div>
              </div>     
            </div>
            <div class="more-btn">
              更多
              <DoubleRightOutlined />
            </div>
        </div>

        <div class="tab-content">
           <div class="content-wrapper" v-for="(con,cIndex) in (item.list)" :key="cIndex">
             <div class="content-wrapper-title">
               <span>{{con.title}}</span>
               <span style="color: #aaa;font-weight: 400">{{con.created_at}}</span>
             </div>
            <div class="content-wrapper-txt" v-html="con.desc"></div>
        </div>
        </div>
     </div>
      <!-- 推广区2 -->
      <div
        style=" margin: 10px 80px;background: #ffff; padding: 20px;"
        v-else-if="item.alias == 'PromotionArea2'"
      >
        <div  class="tag-hidden1" v-if="!item.switch">模块已隐藏</div>
      <div class="tag-tip">{{ item.name }}</div>
      <div class="info-title">{{ item.title }}</div>
      <div class="life-service" :style="{gridTemplateColumns:`repeat(${item.columns}, 1fr)`}" :class="getServiceStyle(item.columns)">
        <div v-for="(service,sIndex) in item.itemList"  :key="sIndex" class="life-service-item">
            <img class="service-icon" :class="getServiceImgStyle(item.columns)" :src="img.url" v-for="(img,t) in service.imgList" :key="t"

             />
             <div class="service-title">{{ service.title }}</div>
             <div class="service-sub-title">{{ service.subTitle }}</div>
        </div>
      </div>
      </div>
      <!-- 推广区3 -->
      <div
        style=" margin: 10px 80px;background: #ffff; padding: 20px;overflow: hidden;"
        v-else-if="item.alias == 'PromotionArea3'"
      >
      <div class="tag-tip">{{ item.name }}</div>
      <div class="info-title" style="margin-right: 0">
        <span>{{ item.title }}</span>
        <div class="more-btn" style="float: right;margin-left: 10px;">
          更多
          <DoubleRightOutlined />
        </div>
      </div>
      <div style="background-color: #fff;overflow: hidden;">
        <div class="important-company" ref="promotionArea3" id="promotionArea3" 
      :style="{'--translate-x':maxScrollDistance,'--duration':durationTime}"
      
      >
        <div class="important-company-item" v-for="(company,i) in item.itemList" :key="i">
          <div class="flex h-30">
            <img :src="company.logo" class="important-company-item-img" v-if="company.logo">
            <div class="important-company-item-title">{{ company.name }}</div>
          </div>
          <div class="important-company-item-url">
            <span>官网：</span>
            <span>{{ company.website_link?company.website_link:'--' }}</span>
          </div>
          <div class="important-company-item-address">
            <span>地址：</span>
            <span>{{ company.business_info?company.business_info.district:'' }}{{ company.business_info?company.business_info.address:'' }}</span>
          </div>
        </div>
      </div>
      </div>
      </div>
       <!-- 推广区4 -->
       <div
        style=" margin: 10px 80px;background: #ffff; padding: 20px;"
        v-else-if="item.alias == 'PromotionArea4'"
      >
         <div  class="tag-hidden1" v-if="!item.switch">模块已隐藏</div>
      <div class="tag-tip">{{ item.name }}</div>
      <div class="info-title">{{ item.title }}</div> 
      <div class="PromotionArea4" :style="{gridTemplateColumns:`repeat(${item.columns}, 1fr)`}" >
       
        <div class="PromotionArea4-item" v-for="(company,i) in item.itemList" :key="i">
            <img :src="company.imgList[0].url" class="promotionArea4-img" v-if="company.imgList[0]">
            <div class="line" v-if="isShowLine(item.columns,i,item.itemList.length)"></div>
            <div class="PromotionArea4-title">{{ company.title }}</div>
            <div class="service-sub-title">{{ company.subTitle }}</div>
        </div>
      </div>
      </div>
        <!-- 热门大厦 -->
        <div
        style=" margin: 10px 80px;background: #ffff; padding: 20px;"
        v-else-if="item.alias == 'hotHouse'"
      >

          <HouseList
            listTitle="热门大厦"
            :list="item.list"
            id="hotVillage"
            v-if="item.list.length"
          />
      </div>
      <!-- 写字楼-->
      <div
        style=" margin: 10px 80px;background: #ffff; padding: 20px;"
        v-else-if="item.alias == 'officeHouse'"
      >
        <template v-for="(a, a1Index) in item.list" :key="index">
          <HouseList
          :listTitle="a.name"
          :list="a.list"
          :id="a.value + 'VillageList'"
          :roomType="true"
          />
        </template>
      </div>
       <!-- 推广区5-->
      <div
        style=" margin: 10px 0 0 0;background: #ffff;"
        v-else-if="item.alias == 'PromotionArea5'"
      ><div  class="tag-hidden2" v-if="!item.switch">模块已隐藏</div>
      <div class="tag-tip">{{ item.name }}</div>
      <div class="PromotionArea5">
        <div class="flex items-center">
          <img src="./images/logo.jpg" class="logo-icon-bottom">
          <div class="PromotionArea5-left">
            <div>
              <div class="PromotionArea5-title">{{ item.title }}</div>
              <div class="PromotionArea5-content">{{ item.content }}</div>
              <a-button type="primary" class="find-house-button">
                    委托找房
              </a-button>
            </div>
          </div>
        </div>
        <div class="PromotionArea5-right">
          <img :src="item.imgList[0].url" class="PromotionArea5-img" v-if="item.imgList[0]">
        </div>
      </div>
      </div>
      
   <!-- 底部栏 -->
      <div v-else-if="item.alias == 'Foot'">
        <div class="footer relative">
          <div class="tag-tip">{{ item.name }}</div>
          <a-row class="footer-center">
            <a-col :span="8" class="pr-30">
              <div class="title">--</div>
              <div>{{ item.title }}</div>
            </a-col>
            <a-col :span="8" class="pr-30">
              <div class="title">联系地址</div>
              <div class="">{{ "--" }}</div>
              <div>（{{ "--" }}）</div>
            </a-col>
            <a-col :span="4">
              <div class="title">官方热线</div>
              <div class="">{{ "--" }}</div>
              <div>
                {{ " " }}
              </div>
            </a-col>
            <!-- <a-col :span="4" v-if="orgInfo.h5_url" class="code-wrap">
          <qrcode-vue :value="orgInfo.h5_url" :size="70" level="H" />
        </a-col> -->
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {  defineComponent, reactive, ref, toRefs,onMounted, computed,watch} from "vue";
import {DoubleRightOutlined} from '@ant-design/icons-vue'
import HouseList from "./components/hostHouse.vue";
export default defineComponent({
  name: "businessHome",
  components:{
    DoubleRightOutlined,
    HouseList,
  },
  props: {
    current: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    let promotionArea3 = ref(null)
    onMounted(()=>{
      // startAutoScroll();
     
    })
    const state = reactive({
      currentAlias:'MainDrawing',
      durationTime:'10s',
      scrollInterval:null,
      //   bannerImage: require("./images/banner.png"),
      linkList: [
        {
          title: "优选好房",
        },
        {
          title: "找楼盘",
        },
        {
          title: "租商铺",
        },
        {
          title: "联合办公",
        },
        {
          title: "委托找房",
        },
        {
          title: "投放房源",
        },
        {
          title: "管理房源",
        },
        {
          title: "楼市资讯",
        },
      ],
      currentTab:0,
      maxScrollDistance:0,
    });
    watch(()=>props.current,(val)=>{
      if(val){

        let list = val.find(item=>item.alias=='PromotionArea3').itemList
        console.log(list.length,'aaaaaaaaaaaa111');
        let length = list.length?list.length:0
        if(length>4){
          // state.maxScrollDistance = `-${length/4 * 75}%`
          state.maxScrollDistance = `-${((length+1)*320 - 1150) / 1150 *100}%`
          state.durationTime = `${length*2.8}s`
        }else if(length==4){
          state.maxScrollDistance = '-20%'
          state.durationTime = '10s'
        }else{
          state.maxScrollDistance = '0%'
        }
      
      }
    },{immediate:true,deep:true})
    const itemClick = (alias) => {
     
      if(alias!='hotHouse'&&alias!='officeHouse'){
        state.currentAlias = alias
        emit("getCurrentIndex", alias);
      }
     
    };
    const tabChange = (index)=>{
        state.currentTab = index
    }
    const getServiceStyle = (columns)=>{
      // let className = 'service-wrapper-4'
      // if(columns==4){
      //   className = 'service-wrapper-4'
      // }else if(columns==5){
      //   className = 'service-wrapper-5'
      // }else if(columns==6){
      //   className = 'service-wrapper-6'
      // }else if(columns==7){
      //   className = 'service-wrapper-7'
      // }else if(columns==8){
      //   className = 'service-wrapper-8'
      // }
      // return className
    }
    const getServiceImgStyle = (columns)=>{
      let className = 'service-img-4'
      if(columns==4){
        className = 'service-img-4'
      }else if(columns==5){
        className = 'service-img-5'
      }else if(columns==6){
        className = 'service-img-6'
      }else if(columns==7){
        className = 'service-img-7'
      }else if(columns==8){
        className = 'service-img-8'
      }
      return className
    }
    const isShowLine = (columns,index,leng)=>{
      if(leng>0){
        if(leng<=columns){
        if(index+1!=leng){
          return true
        }else{
          return false
        }
      }else{
        if((index+1)%columns==0){
          return false
        }else if((index+1)<columns){
          return true
        }else if(index+1!=leng){
          return true
        }else if(index+1==leng){
          return false
        }

      }
      }else{
        return false
      }
    }

    return {
      ...toRefs(state),
      itemClick,
      tabChange,
      getServiceStyle,
      getServiceImgStyle,
      isShowLine,
      
    };
  },
});
</script>
  
  <style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .banner {
    position: relative;
    width: 100%;
    height: 500px;
    object-fit: cover;
  }
  .content-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    .content-title {
      max-width: 800px;
      margin: 0 auto;
      align-items: center;
      .logo-text {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        padding-bottom: 5px;
        margin-right: 180px;
      }
      .find-room {
        width: 300px;
        height: 340px;
        border-radius: 10px;
        margin-top: 20px;
      }
      .icon-list {
        padding: 30px 0;
        display: flex;
        align-items: center;
        .icon {
          width: 40px;
          height: 40px;
          margin-right: 20px;
          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .find-house-button {
        width: 300px;
        height: 48px;
        text-align: center;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
      }
      .content {
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
      .find-house-img {
        width: 400px;
        height: 280px;
        box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.1);
        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .promotionArea {
        position: relative;
        width: 100%;
        height: 150px;
        .promotionAreaImage {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
  @footerHeight: 120px;
  .footer {
    height: @footerHeight;
    background: #202020;
    padding: 20px 80px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    .footer-center {
      max-width: 800px;
      height: 100%;
      margin: 0 auto;

      .pr-30 {
        padding-right: 30px;
      }

      .title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .bold {
        font-weight: bold;
      }

      .code-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        opacity: 0.5;
      }

      :deep(.ant-col) {
        height: @footerHeight - 40;
        overflow: hidden;
      }
    }
  }
}
.link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  height: 55px;
  background-color: rgba(000, 000, 000, 0.2);
}
.tag-tip{
    
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    color: red;
    background: #eee;
   
    height: 30px;
    text-align: center;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
}
.Information{
   
    background-color: #fff;
    margin: 10px 80px;
    padding: 20px;
}
.tab-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tab-left-wrapper{
    display: flex;
    width: 100%;
    align-items: center;
}
.more-btn{
  font-size: 14px;
    color: #aaa;
    flex-shrink: 0;
    font-weight: 400;
}
.info-title{

    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-right: 20px;
    &::before{
        display: inline-block;
        content: '';
        height: 14px;
        width: 4px;
        background: #2681f3;
        margin-right: 5px;
        border-radius: 2px;
    }
}
.tab-list{
    width: 80%;
    overflow-x: auto;
}
.item-tab{
    display: inline-flex;
    align-items: center;
    padding: 3px 5px;
    border-radius: 5px;
    cursor: pointer;
  
}
.item-tab-title{
    padding: 2px 5px;
    color: #aaa;
}
.tab-line{
height: 12px;
width: 1px;
background: #aaa;
margin-left: 10px;
}
.active-tab{
    background: #e8f7fd;
    color: #000;
}
.relative{
    position: relative;
}
.content-title1{
    margin: 0 80px;
    .content{
     display: flex;
     justify-content: space-between;  
     width: 100%;
      padding: 0 10px; 
    }
}
.icon-list {
        padding: 30px 0;
        display: inline-flex;
     
        align-items: center;
        justify-content: center;
        .icon {
          width: 40px;
          height: 40px;
          margin-right: 20px;
          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .content-wrapper{
        padding: 10px;
        background: #f9f9f9;
        margin: 10px 0;
      }
      .content-wrapper-title{
        display: flex;
        justify-content: space-between;
        font-weight: 600;
        color: #000;
        padding: 10px 0;
        border-bottom: 1px solid #eaeaea;
      }
      .content-wrapper-txt{
        padding: 5px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示两行文本 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .life-service{
        display: grid;
       grid-template-columns: repeat(8, 1fr);
       justify-items: start;
       gap: 10px; /* 设置格子之间的间距 */
       margin-top:10px ;
      
      }
      .life-service-item{
       width: 130px;
       
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f9f9f9;
        border-radius: 5px;
      }
      .service-icon{
        border-radius: 50%;
        object-fit: cover;
      }
      .service-wrapper-4{
        width: 240px;
        height: 240px;
      }
      .service-wrapper-5{
        width: 240px;
        height: 240px;
      }
      .service-wrapper-6{
        width: 240px;
        height: 240px;
      }
      .service-wrapper-7{
        width: 240px;
        height: 240px;
      }
      .service-wrapper-8{
        width: 240px;
        height: 240px;
      }
      .service-img-4{
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
      .service-img-5{
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
      .service-img-6{
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
      .service-img-7{
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
      .service-img-8{
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
      .service-title{
        font-weight: 600;
        color: #000;
        margin: 10px 0;
      }
      .service-sub-title{
        color: #aaa;
        font-size: 12px;
      }
      .important-company-item{
        display: inline-block;
        width: 320px;
        flex-shrink: 0;
     background: #f9f9f9;
     padding: 10px;
     margin-right: 10px;
  }
  .important-company-item-url{
    color: #2681f3;
    border-bottom: 1px solid #eaeaea;
    padding: 5px 0;
  }
  .important-company{
   
    
    white-space: nowrap;
    margin-top: 10px;
    animation: scroll var(--duration) linear infinite;
  }
  .important-company::-webkit-scrollbar{
    width: 8px; /* 设置滚动条宽度 */
  height: 10px;
  }
  .important-company::-webkit-scrollbar-track{
    background-color: #f1f1f1; /* 设置滚动条背景颜色 */
}
  .important-company::-webkit-scrollbar-thumb{
    display: block;
    border-radius: 10px;
    cursor: pointer;
  }


  .important-company::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滚动条滑块颜色 */
}

.important-company::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滚动条滑块的鼠标悬停状态颜色 */
}
.PromotionArea4-item{
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
}
.promotionArea4-img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.PromotionArea4{
  display: grid;
       grid-template-columns: repeat(8, 1fr);
       justify-items: center;
       gap: 10px; /* 设置格子之间的间距 */
       margin-top:10px ;
 
}
.PromotionArea4-title{
  margin-top: 20px;
  font-weight: 600;
  color: #000;
}
.line{
  position: absolute;
  top: 10px;
  right: 0;
  width: 1px;
  height: 35%;
  background: #eee;
  margin-left: 10px;
}
.PromotionArea5{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px;
}
.PromotionArea5-title{
  font-size: 18px;
  font-weight: 600;
  color: #000; 
}
.PromotionArea5-content{
  color: #aaa;
  margin: 10px 0;
}
.PromotionArea5-content{
  margin-top: 5px;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(var(--translate-x));
  }
}
.active-item{
  border: 1px dashed #2681f3!important;
}
.item{
  position: relative;
  border: 1px dashed transparent;
  cursor: pointer;
}
.PromotionArea5-left{
  padding: 0 10px;
}
.PromotionArea5-right{
  padding: 0 10px;
}
.logo-icon{
  position: absolute;
  left: 80px;
  height: 30px;
}
.PromotionArea5-img{
  height: 270px;
  width: 270px;
  object-fit: cover;
}
.logo-icon-bottom{
  
  height: 30px;
}
.items-center{
  align-items: center;
}
.important-company-item-img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-right: 5px;
}
.h-30{
  height: 30px;
}
.tag-hidden{
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #2681f3;
  color: #fff;
  padding: 0 5px;
}
.tag-hidden1{
  display: inline-block;
  position: absolute;
  right: 80px;
  top: 10px;
  background-color: #2681f3;
  color: #fff;
  padding: 0 5px;
}
.tag-hidden2{
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 10px;
  background-color: #2681f3;
  color: #fff;
  padding: 0 5px;
}
</style>
  